<template>
  <div class="product-categories">
    <div class="category-wrapper">
      <div 
        v-for="category in categories" 
        :key="category.id"
        :class="['category-item', { active: category.id === activeCategory }]"
        @click="() => $emit('category-change', category.id)"
      >
        <i :class="category.icon"></i>
        <span class="category-name">{{ category.name }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

interface Category {
  id: number;
  name: string;
  icon: string;
}

export default defineComponent({
  name: 'ProductCategories',
  props: {
    categories: {
      type: Array as PropType<Category[]>,
      required: true
    },
    activeCategory: {
      type: Number,
      required: true
    }
  },
  emits: ['category-change']
})
</script>

<style scoped lang="scss">
.product-categories {
  padding: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  height: 60px;
  
  .category-wrapper {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    height: 100%;
    
    &::-webkit-scrollbar {
      height: 3px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }
    
    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 70px;
      height: 100%;
      padding: 5px;
      cursor: pointer;
      transition: all 0.2s ease;
      
      i {
        font-size: 20px;
        margin-bottom: 5px;
        color: #606266;
      }
      
      .category-name {
        font-size: 12px;
        color: #606266;
      }
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      &.active {
        color: #409EFF;
        background-color: #ecf5ff;
        
        i, .category-name {
          color: #409EFF;
        }
      }
    }
  }
}
</style> 